HTML CHEETSHEET by ANHSUL SONI

HTML Boilerplate


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--Body content-->                       
</body>
</html>

Basic Tags👇

Html tag: Creates an HTML document
```
<html></html>
```
Head tag: Sets off the title & other info that isn't displayed
```
<head></head>
```
Body tag: Sets off the visible portion of the document
```
<body></body>
```
Title tag: Puts name of the document in the title bar; when bookmarking pages, this is what is bookmarked
```
<title></title>
```

Body attributes (only used in email newsletters)👇

Body bgcolor: Sets background color, using name or hex value
```
<body bgcolor=?>
```
Body text: Sets text color, using name or hex value
```
<body text=?>
```
Body link: Sets color of links, using name or hex value
```
<body link=?>
```
Body vlink:Sets color of visited links, using name or hex value
```
<body vlink=?>
```
Body alink: Sets color of active links (while mouse-clicking)
```
<body alink=?>
```

FORMATTING 👇

Paragraph tag : Creates a new Paragraph
```
<p>//contains paragraph</p>
```
Br tag: A Inserts a line break
```
<br></br>
```
Blockquote tag: Puts content in a quote - indents text from both sides
```
<blockquote></blockquote>
```
Div tag: Used to format block content with CSS
```
<div></div>
```
Span tag: Used to format inline content with CSS
```
<span></span>
```

LISTS 👇

Ul tag: Creates an unordered list
```
<ul></ul>
```
Ol tag: Creates an ordered list (start=xx, where xx is a counting number)
```
<ol start=?></ol>
```
Li tag: Encompasses each list item
```
<li></li>
```
Dl tag: Creates a definition list
```
<dl></dl>
```
Dt tag: Precedes eachdefintion term
```
<dt></dt>
```
Dd tag: Precedes eachdefintion
```
<dd></dd>
```

Text Tags👇

Pre tag: Creates preformatted text
```
<pre></pre>
```
Heading tags: Creates headlines -- H1=largest, H6=smallest
```
<h1></h1>
```
```
<h2></h2>
```
```
<h3></h3>
```
```
<h4></h4>
```
```
<h5></h5>
```
```
<h6></h6>
```
B tag: Creates bold text (should use <strong> instead)
```
<b></b>
```
I tag: Creates italicized text (should use <em> instead)
```
<i></i>
```
Tt tag: Creates typewriter-style text
```
<tt></tt>
```
code tag: Used to define source code, usually monospace
```
<code></code>
```
Cite tag: Creates a citation, usually processed in italics
```
<cite></cite>
```
Address tag: Creates address section, usually processed in italics
```
<address></address>
```
Em tag: Emphasizes a word (usually processed in italics)
```
<em></em>
```
Strong tag: Emphasizes a word (usually processed in bold)
```
<strong></strong>
```
Font size tag: Sets size of font - 1 to 7 (should use CSS instead)
```
<font size=?> </font> 
```
Font color tag: Sets font color (should use CSS instead)
```
<font color=?> </font>
```
Font face tag: Defines the font used (should use CSS instead)
```
<font face=?> </font>            
```

Graphical elements👇

Hr tag: Inserts a horizontal rule
```
<hr>
```
Hr size tag: Sets size (height) of horizontal rule
```
<hr size=?>
```
Hr width tag: Sets width of rule (as a % or absolute pixel length)
```
<hr width=?>
```
Hr noshade tag: Creates a horizontal rule without a shadow
```
<hr noshade>
```
Image tag: Adds image; it is a separate file located at the URL
```
<img src=""/>
```
Image tag with align attribute: Aligns image left/right/center/bottom/top/middle (use CSS)
```
<img src="" align=?>
```
Image tag with border attribute: Sets size of border surrounding image (use CSS)
```
<img src="<!--url of the image" border=?>
```
Image tag with height attribute: Sets height of image, in pixels
```
<img src="" height=?>
```
Image tag with width attribute: Sets width of image, in pixels
```
<img src="" width=?>
```
Image tag with alt attribute: Sets the alternate text for browsers that can't process images (required by the ADA)
```
<img src="" alt=?>
```